<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>经典BTC合约</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #F8F8F8;
            font-size: 0.24rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
        }

        .operationOrder {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.24rem;
            color: #262626;
            margin: 0.23rem 0;
            padding: 0 0.3rem;
            box-sizing: border-box;
        }

        .operationOrder div {
            display: flex;
            display: -webkit-flex;
            justify-content: flex-end;
        }

        .operationOrder div p {
            position: relative;
        }

        .operationOrder div p:last-of-type {
            position: relative;
            margin-left: 0.7rem;
        }

        .operationOrder div p img {
            height: 0.26rem;
        }

        .btcList {
            width: 100%;
            height: auto;
        }

        .btclistLi {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .btclistLi li {
            width: 6.9rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            background-color: #fff;
            border-radius: 0.1rem;
            padding: 0.24rem;
            box-sizing: border-box;
            margin-bottom: 0.2rem;
            overflow: hidden;
        }

        .btclistLi li>p {
            width: 100%;
            height: 0.4rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
        }

        .btclistLi li>p b {
            font-weight: normal;
            width: 1.82rem;
            font-size: 0.24rem;
            font-weight: 500;
            line-height: 28px;
            color: rgba(153, 153, 153, 1);
        }

        .statusIcon {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.1rem;
        }

        .statusIcon>p {
            width: auto;
            height: auto;
            padding: 0.05rem 0.12rem;
            font-size: 0.18rem;
            background-color: #FFF2F3;
            border-radius: 0.06rem;
            font-size: 0.18rem;
            margin-right: 0.1rem;
            color: #FF6678;
        }

        .itemTitile {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
        }

        .itemTitile>p {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.1rem;
        }

        .itemTitile>p span {
            font-size: 0.3rem;
            color: #262626;
        }

        .itemTitile img {
            width: 0.3rem;
            margin-right: 0.1rem;
        }

        .lockEndTime {
            width: 6.9rem;
            height: 0.6rem;
            background: rgba(255, 248, 237, 1);
            border-radius: 0.1rem;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(221, 146, 23, 1);
            margin: 0.24rem 0;
            margin-left: calc((100% - 6.9rem) / 2);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }

        .arrcaliTime .colorText {
            display: block;
            width: auto;
            height: 0.34rem;
            background: rgba(255, 151, 3, 0.1);
            font-size: 0.22rem;
            margin: 0 0.08rem;
            line-height: 0.34rem;
            text-align: center;
            color: rgba(221, 146, 23, 1);
            padding: 0 0.1rem;
            box-sizing: border-box;
            border-radius: 0.06rem;
        }

        .itemTitile .showTransferNum {
            position: absolute;
            top: -40%;
            right: -1.1rem;
            padding: 0.02rem 0.1rem;
            background-color: #FD6B6B;
            border-radius: 0.2rem 0.2rem 0.2rem 0;
            color: #fff;
            font-size: 0.18rem;
        }

        .btclistLi li>.hewrankingbox {
            height: auto;
            justify-content: space-between;
        }

        .rankingNum {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="operationOrder">
        <p class="shaixuan">
            <img src="../../image/icondxc.png" style="width: 0.24rem;height: 0.26rem;">
            <span style="color: #898989;">
                筛选
            </span>
        </p>
        <div>
            <p class="suanliChange">
                <img src="../../image/iconzhihuanx.png" alt="">
                <span>算力置换</span>
                <img src="../../image/hotnedwx.png" id="fixedImg"
                    style="width: 0.34rem;height: 0.2rem;position: absolute;right: -0.34rem;top:-0.1rem;">
            </p>
            <p class="plxd">
                <img src="../../image/iconpiliang.png" alt="">
                <span>
                    批量续单
                </span>
            </p>
        </div>
    </div>
    <div class="btcList">
        <p class="lockEndTime" style="display: none;">
            <span>--</span>个合约包锁定到期，即将自动续单<img src="../../image/tishiasd.png"
                style="width: 0.24rem;margin-left: 0.05rem;">
        </p>
        <ul class="btclistLi">
            <!-- <li>
                <div class="itemTitile">
                    <p>
                        <img src="../../image/iconasxx.png" alt="">
                        <span>
                            BTC 算力合约包
                        </span>
                    </p>
                    <span style="font-size: 0.24rem;">
                        挖矿中
                    </span>
                </div>
                <div class="statusIcon">
                    <p>
                        锁定即将到期
                    </p>
                    <p>
                        合约即将到期
                    </p>
                    <p>
                        分期购
                    </p>
                    <p>
                        30天
                    </p>
                    <p>
                        购买
                    </p>
                </div>
                <p class="hewrankingbox">
                    <span style="color: #DD9217;font-size: 0.22rem;">
                        自动续单库存不足,排队中<br>
                        <span>
                            续单库存不足,XX天锁定期排队中..
                        </span>
                    </span>
                    <span class="rankingNum">
                        <span style="font-size: 0.22rem;color: #262626;">
                            当前排名<span style="font-size: 0.28rem;color: #FC6F41;">123</span>
                        </span>
                        <span style="font-size:0.18rem;color:#999999;">
                            排队总数 2918793
                        </span>
                    </span>
                </p>
                <p>
                    <b>
                        总金额
                    </b>
                    <span>
                        3000 CNY
                    </span>
                </p>
                <p>
                    <b>
                        BTC总算力
                    </b>
                    <span>
                        5.8T(1T+4.8T)
                    </span>
                </p>
                <p>
                    <b>
                        锁定到期
                    </b>
                    <span>
                        2018-09-02 00:00:00
                    </span>
                </p>
                <p>
                    <b>
                        开挖时间
                    </b>
                    <span>
                        2018-08-02 00:00:00
                    </span>
                </p>
            </li> -->
        </ul>
        <div id="listState"
            style="padding: 0.2rem 0;width:100%;text-align: center;background: #f5f5f5;color: #9c9c9c;font-size: 0.24rem;">
            加载中……
        </div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var powerUnit = "T" //单位
        var isHaveMachine = 0;//是否有Ipfs置换矿机  0 就是没库存
        var getParater = {};
        var total_page = 0;
        var currentPage = 1;
        //选择第一个，重置选择
        function resetChoose() {
            getParater = {
                isBhpPos: "ALL",//选择矿机挖矿类型  ALL 全部矿机, PT 普通矿机,SW 双挖矿机
                state: "ALL",//矿机的状态 ALL 全部 KW开挖 DW 待挖   TZ 停租
                type: "P",//矿机的购买类型 ALL 全部 P购买 G奖励算力
                regularDateNum: "ALL",//订单类型  ALL 全部 30活期 90定三 180定六
                state2: "ALL", //ALL 全部 P购买 S 承接
                not_return: 0, //ALL 全部 1不回购 0 可回购
                electricendType: 0 //电费时间类型查询 ；1-过期； 2-即将到期（7天）； 3-没到期的 0全部
            };
        }
        resetChoose();
        app.handlePage();
        app.setStorage("newmypowerdalog", getParater);
        //购买算力以及奖励算力接口
        function loadPage(currentPage, account, getData, isdown) {
            getData.token = account.token;
            getData.page = currentPage;
            getData.pageSize = "10";
            app.ajaxPro({
                url: "order/lists",
                values: getData,
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    total_page = ret.data.totalPage;
                    isHaveMachine = ret.data.ventroy || 0;
                    var arrciveTime = ret.data.end_days;//显示锁定即将到期的天数
                    if (ret.data.auto_renewal_nums > 0 && getData.not_return == "0") {
                        $(".lockEndTime").show().find("span").text(ret.data.auto_renewal_nums);
                    }
                    ret.data.orderList.map(function (item) {
                        item.total_deposit = item.totalDeposit;
                        item.flag = item.flag.substring(1, 2);
                        if (item.currencyCode == "BTC") {
                            item.rentpowerUnit = "T";
                        } else {
                            item.rentpowerUnit = "M";
                        }
                        if (item.countdown>0) {
                            var dayTimeYuyue = app.getDurationNew(item.countdown).split(":");
                            item.daysNumnew = dayTimeYuyue[0];
                            item.housNumnew = dayTimeYuyue[1];
                            item.minNumnew = dayTimeYuyue[2];
                        }
                        item.okenTake = false;
                        if (item.label == 1) {
                            item.okenTake = true;
                        }
                        if (item.endTime) {
                            //指定时间的时间戳(s)
                            var operTime = app.toSecond(item.endTime);
                            //返回当前时间的时间戳(s)
                            var nowThisTime = app.getCurStamp();
                            var isShowEnd = operTime - nowThisTime;
                            if (item.is_regular != 0 && isShowEnd < Number(app.accMul(86400, arrciveTime))) {
                                item.showEnd = true;
                            }
                            if (nowThisTime > operTime) {
                                item.showEnd = false;
                            }
                        } else {
                            item.showEnd = false;
                        }
                        item.isRanking = false;
                        if (item.totalnum > 0 || item.rownum > 0) {
                            item.isRanking = true;
                        }
                        item.showArriTime = false;
                        if (item.auto_renewal_time && item.auto_renewal_time > 60 && item.freezeNum < 1 && item.isRanking != true &&  item.countdown <= 0) {
                            item.showArriTime = true;
                            var dayTime = app.getDurationNew(item.auto_renewal_time).split(":");
                            item.daysNum = dayTime[0];
                            item.housNum = dayTime[1];
                            item.minNum = dayTime[2];
                        }
                        if (item.returnEndDate) {
                            item.returnEndDate = item.returnEndDate + " 00:00:00";
                            //指定时间的时间戳(s)
                            var operTimeELec = app.toSecond(item.returnEndDate);
                            //返回当前时间的时间戳(s)
                            var nowThisTimeElec = app.getCurStamp();
                            var isShowEndelec = operTimeELec - nowThisTimeElec;
                            if (isShowEndelec < 604800) {
                                item.showElecEnd = true;
                            }
                            if (nowThisTime > operTime) {
                                item.showElecEnd = false;
                            }
                        } else {
                            item.showElecEnd = false;
                        }
                        item.base_power = item.basePower;//基础算力
                        // item.total_power = app.accMul(item.basePower, item.num);//总算力(基础)
                        item.total_power = app.accMul(
                            item.computingPower,
                            item.num
                        );
                        item.totalBhpPower = app.accMul(item.num, item.bhpPower);
                        item.total_base_power = app.accMul(
                            item.base_power,
                            item.num
                        );
                        item.total_regular_power = app.numSub(item.total_power, item.total_base_power);
                        if (item.dragStatus == 1) {
                            item.textColor = "#42aa79"; //挖矿中
                        } else if (item.dragStatus == 0) {
                            item.textColor = "#f3933a"; //待挖
                        } else {
                            item.textColor = "#B8B8B6";
                        }
                    })
                    var temp = doT.template($("#ul_list").text());
                    if (isdown) {
                        $(".btclistLi").html(temp(ret.data.orderList));
                    } else {
                        $(".btclistLi").append(temp(ret.data.orderList));
                    }
                    if (currentPage == 1 && ret.data.orderList.length == 0) {
                        $("#listState").text("暂时没有相关数据");
                    }
                    if (currentPage == total_page && total_page != 0) {
                        $("#listState").text("没有更多了");
                    }
                    $("#listState").show();
                }
            })
        };
        loadPage(currentPage, account, getParater, true);
        $(".lockEndTime").click(function () {
            var param = {
                dtype: "dialog47",
                data: {
                    text: "1.当合约锁定到期，平台将在7天后，按照 原合约锁定期限自动续单</br></br> 2.若续单库存不足，自动续单将会失败，进 入续单排队阶段，在此期间，可选择库存 充足的合约类型手动续单，同时可进入续单页面选择锁定期进行排队</br></br> 3.排队续单的合约包按照排队时长依次续 单，若排队时长相同，按下单时间排序",
                    event: "closeDus"
                }
            };
            app.dialog(param);
        })
        app.toBottom(function () {
            if (currentPage < total_page) {
                currentPage++;
                loadPage(currentPage, account, getParater, false);
            }
        });
        app.downRefresh(function () {
            $("body").scrollTop(0);
            $(".btclistLi").empty();
            currentPage = 1;
            total_page = 0;
            loadPage(currentPage, account, getParater, true);
        });
        $(".btclistLi").on("click", "li", function () {
            var params = {
                name: "computing_details_headerwin",
                url: app.hd + "rent/computing_details.html",
                pageParam: {
                    subpage: "rent/computing_details",
                    name: "computing_details_headerwin",
                    title: "合约包详情",
                    id: $(this).data("machineid"),
                    status: $(this).data("machinestatus"),
                    isShow: $(this).data("show"),
                    isshowText: $(this).data("showtext"),
                    orderId: $(this).attr("data-orderId"),
                    textColor: $(this).attr("data-textColor"),
                    machineState: $(this).attr("data-dragStatus"),
                    cointype: $(this).attr("data-currencyCode")
                }
            };
            app.openWin(params);
        });
        //批量续单
        $(".plxd").click(function (e) {
            var goCerfition = {
                name: "piliangxudan",
                subpage: "mine/piliangxudan",
                title: "批量续单",
                param: {
                    pageName: "piliangxudan",
                }
            };
            app.setNavBarAttr(goCerfition);
        })
        //算力置换
        $(".suanliChange").click(function (e) {
            if (isHaveMachine == 0) {
                var param = {
                    dtype: "dialog86"
                };
                app.dialog(param);
                return
            }
            var cointypecontract = {
                name: "changeIpfs",
                subpage: "rent/change_ipfs",
                title: "算力置换",
                rightTitle: "记录",
                param: {
                    pageName: "changeIpfs",
                    allowEdit: true,
                    rightParam: {
                        name: "changeIpfsRecord",
                        subpage: "my/reandchare",
                        title: "置换记录",
                        param: {
                            pageName: "reandchare"
                        }
                    }
                }
            }
            app.setNavBarAttr(cointypecontract);
        })
        app.listen("chooseMycalcPower", function (ret, err) {
            currentPage = 1;
            total_page = 0;
            $(".btclistLi").empty();
            getParater.state = ret.value.state;
            getParater.work_type = ret.value.work_type;
            getParater.date_type = ret.value.date_type;
            getParater.pay_type = ret.value.pay_type;
            getParater.electricendType = ret.value.electricendType;
            getParater.isBhpPos = ret.value.isBhpPos;
            getParater.regularDateNum = ret.value.regularDateNum;
            getParater.state2 = ret.value.state2;
            loadPage(currentPage, account, getParater, true);
        })
        //筛选
        $(".shaixuan").click(function () {
            var heightNum = app.H * 0.16;
            if (app.ST != "ios") heightNum = app.H * 0.12
            //可回购弹窗
            app.openFrame({
                name: "newmypowerdilog",
                url: app.hd + "mine/newmypowerdilog.html",
                bgColor: "rgba(0,0,0,0.4)",
                rect: {
                    x: 0,
                    y: heightNum,
                    w: app.W,
                    h: app.H
                }
            });
        })
        app.headerMap();
    }
</script>
<!-- 购买算力 -->
<script type="text/html" id="ul_list">
    {{~it:item:index}}
    <li data-mcType="{{=item.type}}" data-currencyCode={{=item.currencyCode}} data-checkVoucher="{{=item.orderId}}" data-machineid="{{=item.orderId}}" data-showtext="{{=item.showText}}" data-machinestatus="{{=item.dragStatus}}" data-show="{{=item.showEnd}}" data-orderId="{{=item.orderId}}" data-dragStatus="{{=item.dragStatus}}" data-textColor="{{=item.textColor}}">
        <div class="itemTitile">
            <p>
                {{?item.isBhpPos==1}}
                    <img src="../../image/iconbsasx.png"  style="width: 0.67rem;height: 0.3rem;border-radius:0.08rem;">
                {{??}}
                    {{?item.currencyCode=="BTC"}}
                    <img src="../../image/iconasxx.png"  style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                    {{??item.currencyCode=="ETH"}}
                    <img src="../../image/iconcethx.png" style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                    {{??}}
                    <img src="../../image/icondltcx.png" style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                    {{?}}
                {{?}}
                <span style="position: relative;">
                    {{=item.productName}}
                    <span class="showTransferNum" style="display:{{=Number(item.freezeNum)>0?'inline-block':'none'}};">
                        {{=item.freezeNum}}份转让中
                    </span>
                </span>
            </p>
            {{?item.flag == 1 && item.fqState=="2"}}
                <span class="showWorkStu" style="display:inline-block;width:1.5rem;text-align:right;color:#B8B8B6;font-size: 0.25rem;display:inline-block;">
                    已清算
                </span>
            {{??}}
                <span class="showWorkStu" style="display:inline-block;width:1.5rem;text-align:right;color:{{=item.textColor}};font-size: 0.25rem;display:{{=(item.freeze_num==item.num && item.num !=0)?'none':'inline-block'}};">
                    {{=item.workText}}
                </span>
            {{?}}
        </div>
        <div class="statusIcon">
            <p style="background-color: #F7F7F7;color:#898989;">
                {{=item.state2==2?"承接":"购买"}}
            </p>
            {{?item.showEnd==true}}
                <p>
                    锁定即将到期
                </p>
            {{?}}
            <!-- <p>
                合约即将到期
            </p> -->
            {{?item.regularDateNum>0 && item.showArriTime != true}}
            <p style="background-color: #F7F7F7;color:#898989;">
                {{=item.regularDateNum}}天
            </p>
            {{?}}
            {{?item.flag == 1}}
                <p style="background-color:#FFF2EF;color:#C2382B;">
                    分期购
                </p>
            {{?}}
            {{?item.okenTake==true}}
            <p  style="background-color: rgba(66,170,121,0.1);color:#42AA79;">
                可转让
            </p>
            {{?}}
        </div>
        <div class="arrcaliTime" style="width:100%;padding:0 0.3rem 0 0;margin:0.1rem 0;box-sizing:border-box;color:rgba(221,146,23,1);display: flex;display: -webkit-flex;align-items: center;justify-content: flex-start;font-size:0.22rem;display:{{=item.countdown > 0 ?'flex':'none'}}">
            已预约<span class="colorText" style="margin-left:0;">{{=item.daysNumnew}}</span>天<span class="colorText">{{=item.housNumnew}}</span>时<span class="colorText">{{=item.minNumnew}}</span>分后,续单{{=item.newRegularDateNum}}天
         </div>
        <div class="arrcaliTime" style="width:100%;padding:0 0.3rem 0 0;margin:0.1rem 0;box-sizing:border-box;color:rgba(221,146,23,1);display: flex;display: -webkit-flex;align-items: center;justify-content: flex-start;font-size:0.22rem;display:{{=item.showArriTime == true?'flex':'none'}}">
            <span class="colorText" style="margin-left:0;">{{=item.daysNum}}</span>天<span class="colorText">{{=item.housNum}}</span>时<span class="colorText">{{=item.minNum}}</span>分,将自动续单
         </div>
         {{?item.isRanking && item.isRanking == true}}
         <p class="hewrankingbox">
            <span style="color: #DD9217;font-size: 0.22rem;">
                续单库存不足,{{=item.newRegularDateNum}}天锁定期排队中..
            </span>
            <span class="rankingNum">
                <span style="font-size: 0.22rem;color: #262626;">
                    当前排名<span style="font-size: 0.28rem;color: #FC6F41;">{{=item.rownum}}</span>
                </span>
                <span style="font-size:0.18rem;color:#999999;">
                    排队总数 {{=item.totalnum}}
                </span>
            </span>
        </p>
        {{?}}
        <p>
            <b>
                总金额
            </b>
            <span>
                {{=item.total_deposit}}
                {{?(item.paymentCurrencyCode=="BCNY")}}
                    OTC余额
                {{??}}
                    {{=item.paymentCurrencyCode}}
                {{?}}
            </span>
        </p>
        <p>
            <b>
                BTC总算力
            </b>
            <span>
                {{=item.total_power}}{{=item.rentpowerUnit}}
            </span>
        </p>
        {{?item.isBhpPos==1}}
            <p>
                <b>
                    BHP参配算力
                </b>
                <span>
                    {{=item.totalBhpPower}}{{=item.rentpowerUnit}}
                </span>
            </p>
        {{?}}
        {{?item.type==10 || item.type==11}}
            <p>
                <b>
                    合约到期
                </b>
                <span>
                    {{=item.constractEndDate==null? "":item.constractEndDate}}
                </span>
            </p>
        {{??}}
            <p>
                <b>
                    锁定到期
                </b>
                <span>
                    {{=item.endTime==null? "":item.endTime}}
                </span>
            </p>
        {{?}}
        <p>
            <b>
                开挖时间
            </b>
            <span>
                {{=item.startTime}}
            </span>
        </p>
        {{?item.dragStatus == 0}}

        {{??item.dragStatus == 1}}

        {{??}}
        <p>
            <b>
                退单时间
            </b>
            <span>
                {{=item.updateTime}}
            </span>
        </p>
        {{?}}
    </li>
    {{~}}
</script>

</html>